﻿@namespace AntDesign
@inherits AntDomComponentBase
@using AntDesign.Internal;

<div class="@ClassMapper.Class" style="@Style" id="@Id">
    <Row Class="ant-form-item-row">
        @if (!NoStyle && ( !string.IsNullOrEmpty(DisplayName) || LabelTemplate != null))
        {
            <AntDesign.Col @attributes="GetLabelColAttributes()" Class="@_labelClassMapper.Class">
                @if (LabelTemplate != null)
                {
                    @LabelTemplate
                }
                else
                {
                    <label class=@GetLabelClass() style="@LabelStyle">
                        @DisplayName
                        @if (Form?.RequiredMark == FormRequiredMark.Optional && !IsRequired)
                        {
                            <span class="ant-form-item-optional">@Form.Locale.Optional</span>
                        }
                        @if (ToolTip != null)
                        {
                            <Tooltip Placement="Placement.TopLeft" Title="@ToolTip" ArrowPointAtCenter="true">
                                <Unbound>
                                     <Icon RefBack="context" Type="@IconType.Outline.QuestionCircle" Class="ant-form-item-tooltip" />
                                </Unbound>
                            </Tooltip>
                        }
                    </label>
                }
            </AntDesign.Col>
        }

        <AntDesign.Col @attributes="GetWrapperColAttributes()" Class=@($"{_prefixCls}-control")>
            <div class=@($"{_prefixCls}-control-input")>
                <div class=@($"{_prefixCls}-control-input-content")>
                    <CascadingValue Value="this" Name="FormItem" TValue="IFormItem" IsFixed="@true">
                        @ChildContent
                    </CascadingValue>
                </div>
            </div>

            @if (!NoStyle)
            {
                @foreach (var message in ValidationMessages)
                {
                    <div style="display: flex; flex-wrap: nowrap;">
                        <div class="ant-form-item-explain ant-form-item-explain-connected" role="alert">
                            <div class=@($"{_prefixCls}-explain-{ValidateStatus.ToString().ToLowerInvariant()}")>
                                @message
                            </div>
                        </div>
                        <div style="width: 0px; height: 24px;"></div>
                    </div>
                }
            }
        </AntDesign.Col>
    </Row>
    @if (!NoStyle && ValidationMessages.Length > 0)
    {
        <div class="ant-form-item-margin-offset" style="margin-bottom: -24px;"></div>
    }
</div>
